<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar
      title="个人中心"
      left-text="返回"
      @click-left="$router.back()"
      left-arrow
    />
    <div class="header" @click="$router.push('/useredit')">
      <!-- 如果后端返回的用户资料中有头像，我们才渲染并拼接 head_img -->
      <img v-if="head_img" class="avatar" :src="$baseURL + head_img" alt="" />
      <!-- v-if 和 v-else 只会执行其中一个，如果后端返回没有头像，就渲染默认头像 -->
      <img
        v-else
        class="avatar"
        src="../assets/微信图片_20201226165717.jpg"
        alt=""
      />
      <div class="info">
        <p class="name">
          <!-- <i class="iconfont iconxingbienan"></i> -->
          <i
            class="iconfont"
            :class="{
              iconxingbienan: gender === 1,
              iconxingbienv: gender === 0,
            }"
          ></i>
          <span>{{ nickname }}</span>
        </p>
        <p class="date">{{ create_date }}</p>
      </div>
      <i class="iconfont iconjiantou1"></i>
    </div>
    <div>
      <van-cell-group>
        <van-cell title="我的关注" value="关注的用户" to="/attention" is-link />
        <van-cell
          title="我的跟贴"
          value="跟帖/回复"
          to="/usercomment"
          is-link
        />
        <van-cell title="我的收藏" value="文章/视频" to="/collect" is-link />
        <van-cell title="设置" is-link />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { getUserInfo } from "@/utils/myToken";
import { userDetail } from "@/api";
import defaultImg from "@/assets/微信图片_20201226165717.jpg";
export default {
  data() {
    return {
      gender: 0,
      nickname: "游客",
      create_date: "",
      head_img: "",
      // 但用户资料中没有头像的时候，才使用 defaultImg
      defaultImg: defaultImg,
    };
  },
  mounted() {
    // console.log(this);
    // console.log(defaultImg);
    // console.log(this.$baseURL)
    //获取到本地存储的用户id
    console.log(getUserInfo());
    const { id } = getUserInfo();
    // console.log(id)
    //发送请求
    userDetail(id)
      .then((res) => {
        // 解构出需要用到的数据
        const { message, data } = res.data;
        // console.log(data);
        // 把获取到的数据绑定到 data 中
        this.gender = data.gender;
        this.nickname = data.nickname;
        this.create_date = data.create_date.substr(0, 10);
        this.head_img = data.head_img;
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    onClickLeft() {},
  },
};
</script>

<style lang="less" scoped>
.header {
  height: 130px;
  display: flex;
  padding: 0 20px;
  align-items: center;
  .avatar {
    width: 70px;
    height: 70px;
    border: 1px solid #ddd;
    border-radius: 50%;
    margin-right: 10px;
  }
  .info {
    flex: 1;
    font-size: 14px;
    p {
      margin: 5px 0;
    }
    .name {
      .iconxingbienan {
        color: #8ec5ee;
      }
      .iconxingbienv {
        color: pink;
      }
      span {
        margin-left: 5px;
        color: #333;
      }
    }
    .date {
      color: #999;
    }
  }
  .iconjiantou1 {
    color: #ccc;
    font-size: 25px;
  }
}
</style>